import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:mall/constant/app_colors.dart';
import 'package:mall/constant/app_dimens.dart';
import 'package:mall/constant/app_strings.dart';
import 'package:mall/constant/text_style.dart';
import 'package:mall/modules/sc/goods_sc.dart';
import 'package:mall/ui/page/goods/widgets/goods_widget.dart';
import 'package:mall/ui/widgets/loading_dialog.dart';
import 'package:mall/utils/list_placeholder_component/list_placeholder_component.dart';
import 'package:mall/utils/refresh/refresh_widget.dart';
import 'package:mall/utils/refresh/warp_refresh_controller.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'package:collection/collection.dart';

class SearchGoodsPage extends StatefulWidget {
  @override
  _SearchGoodsPageState createState() => _SearchGoodsPageState();
}

class _SearchGoodsPageState extends State<SearchGoodsPage> {
  TextEditingController _keyController = TextEditingController();

  final sc_searchGoodsListSc = Get.put(SearchGoodsListSc());

  // SearchGoodsViewModel _searchGoodsViewModel = SearchGoodsViewModel();
  late final _refreshController = WarpRefreshController(loadState: sc_searchGoodsListSc.loadState);

  // RefreshController _refreshController = RefreshController();
  FocusNode _focusNode = FocusNode();
  // var _pageIndex = 1;
  // var _pageSize = 10;
  // var _sortName = AppStrings.SORT_NAME;
  // var _orderType = AppStrings.DESC;

  RxBool publishTimeConditionArrowUp = false.obs;
  RxBool priceConditionArrowUp = false.obs;
  @override
  void initState() {
    super.initState();
    // _searchGoodsViewModel.pageState = PageState.empty;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: _searchWidget(),
        centerTitle: true,
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(48.0),
          child: _conditionWidget(),
        ),
      ),
      body: _contentWidget(),
    );
  }

  Widget _searchWidget() {
    return Container(
      height: AppBar().preferredSize.height,
      padding: EdgeInsets.only(top: 15, bottom: 15),
      alignment: Alignment.center,
      color: AppColors.C_FF5722,
      child: Container(
          margin: EdgeInsets.only(right: ScreenUtil().setWidth(AppDimens.DIMENS_100)),
          decoration: BoxDecoration(
            color: AppColors.C_FFFFFF,
            border: Border.all(color: AppColors.C_FFFFFF, width: 1),
            borderRadius: BorderRadius.circular(ScreenUtil().setWidth(AppBar().preferredSize.height / 2)),
          ),
          child: TextField(
            onEditingComplete: () {
              sc_searchGoodsListSc.keyword = _keyController.text;
              sc_searchGoodsListSc.refreshData();
            },
            controller: _keyController,
            textInputAction: TextInputAction.search,
            focusNode: _focusNode,
            style: FMTextStyle.color_222222_size_13,
            decoration: InputDecoration(
              prefixIcon: Icon(
                Icons.search,
                size: ScreenUtil().setWidth(AppDimens.DIMENS_80),
                color: AppColors.C_FF5722,
              ),
              hintText: AppStrings.GOODS_SEARCH_HINT,
              hintStyle: FMTextStyle.color_999999_size_13,
              enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.transparent),
              ),
            ),
          )),
    );
  }

  _showDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return LoadingDialog(
            title: AppStrings.LOGINING,
            textColor: AppColors.C_999999,
            titleSize: AppDimens.DIMENS_13,
            indicatorRadius: 22.5,
          );
        });
  }

  Widget _conditionWidget() {
    return Container(
      color: AppColors.C_FFFFFF,
      height: 45,
      alignment: Alignment.center,
      child: Row(
        children: [
          Expanded(
            flex: 1,
            child: GestureDetector(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    AppStrings.PUBLISH_TIME,
                    style: FMTextStyle.color_222222_size_13,
                  ),
                  Obx(() => Icon(
                        publishTimeConditionArrowUp.value ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down,
                        color: AppColors.C_999999,
                      )),
                ],
              ),
              onTap: () => _showPublishTimeDialog(),
            ),
          ),
          Expanded(
            flex: 1,
            child: GestureDetector(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    AppStrings.PRICE_CONDITION,
                    style: FMTextStyle.color_222222_size_13,
                  ),
                  Icon(
                    priceConditionArrowUp.value ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down,
                    color: AppColors.C_999999,
                  ),
                ],
              ),
              onTap: () => _showPriceDialog(),
            ),
          ),
        ],
      ),
    );
  }

  Widget _contentWidget() {
    // return SmartRefresher(
    //   enablePullUp: _searchGoodsViewModel.isLoadMore,
    //   enablePullDown: true,
    //   header: WaterDropMaterialHeader(
    //     backgroundColor: AppColors.COLOR_FF5722,
    //   ),
    //   controller: _refreshController,
    //   child: _showWidget(_searchGoodsViewModel),
    //   onRefresh: _onRefresh,
    //   onLoading: _onLoadMore,
    // );
    return Obx(
      () => RefreshComponent(
        controller: _refreshController,
        onLoading: () => sc_searchGoodsListSc.loadMoreData(),
        onRefresh: () => sc_searchGoodsListSc.refreshData(),
        child: WrappedListPlaceholderComponent.widget(
            sc: sc_searchGoodsListSc,
            builder: (p0) => GridView.builder(
                shrinkWrap: true,
                padding: EdgeInsets.all(0),
                itemCount: p0.length,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, childAspectRatio: 0.9),
                itemBuilder: (BuildContext context, int index) {
                  return GoodsWidget(p0[index], (value) {});
                })),
      ),
    );
  }

  Function deepEq = const DeepCollectionEquality().equals;

  // Widget _showWidget(SearchGoodsViewModel searchGoodsViewModel) {
  //   if (searchGoodsViewModel.pageState == PageState.hasData) {
  //     return _goodsWidget();
  //   }
  //   return ViewModelStateWidget.stateWidgetWithCallBack(searchGoodsViewModel, _onRefresh);
  // }

  _showPublishTimeDialog() {
    _focusNode.unfocus();
    // _searchGoodsViewModel.setPublishTimeCondition();
    publishTimeConditionArrowUp.value = !publishTimeConditionArrowUp.value;
    showModalBottomSheet(
        context: context,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(AppDimens.DIMENS_20), topRight: Radius.circular(AppDimens.DIMENS_20))),
        builder: (BuildContext context) {
          return Container(
            height: ScreenUtil().setHeight(AppDimens.DIMENS_300),
            width: double.infinity,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                    margin: EdgeInsets.only(top: 15),
                    alignment: Alignment.center,
                    height: 45,
                    child: GestureDetector(
                      onTap: () {
//                        _orderType = AppStrings.ASC;
//                        _sortName = AppStrings.PUBLISH_TIME;
//                        _onRefresh();
                        Navigator.pop(context);
                      },
                      child: Text(AppStrings.PUBLISH_TIME_ASC, style: FMTextStyle.color_222222_size_13),
                    )),
                Container(
                    margin: EdgeInsets.only(bottom: 15),
                    alignment: Alignment.center,
                    height: 45,
                    child: GestureDetector(
                      onTap: () {
//                        _orderType = AppStrings.DESC;
//                        _sortName = AppStrings.PUBLISH_TIME;
//                        _onRefresh();
                        Navigator.pop(context);
                      },
                      child: Text(AppStrings.PUBLISH_TIME_DESC, style: FMTextStyle.color_222222_size_13),
                    ))
              ],
            ),
          );
        }).whenComplete(() {
      // _searchGoodsViewModel.setPublishTimeCondition();
      publishTimeConditionArrowUp.value = !publishTimeConditionArrowUp.value;
    });
  }

  _showPriceDialog() {
    _focusNode.unfocus();
    // _searchGoodsViewModel.setPriceCondition();
    priceConditionArrowUp.value = !priceConditionArrowUp.value;
    showModalBottomSheet(
        context: context,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(AppDimens.DIMENS_20), topRight: Radius.circular(AppDimens.DIMENS_20))),
        builder: (BuildContext context) {
          return Container(
            height: ScreenUtil().setHeight(AppDimens.DIMENS_300),
            width: double.infinity,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                    margin: EdgeInsets.only(top: 15),
                    alignment: Alignment.center,
                    height: 45,
                    child: GestureDetector(
                      onTap: () {
                        // _orderType = AppStrings.ASC;
                        // _sortName = AppStrings.SORT_RETAIL_PRICE;
                        // _onRefresh();
                        sc_searchGoodsListSc.sortName = AppStrings.SORT_RETAIL_PRICE;
                        sc_searchGoodsListSc.orderType = AppStrings.ASC;
                        sc_searchGoodsListSc.refreshData();
                        Navigator.pop(context);
                      },
                      child: Text(AppStrings.PRICE_ASC, style: FMTextStyle.color_222222_size_13),
                    )),
                Container(
                    margin: EdgeInsets.only(bottom: 15),
                    alignment: Alignment.center,
                    height: 45,
                    child: GestureDetector(
                      onTap: () {
                        // _orderType = AppStrings.DESC;
                        // _sortName = AppStrings.SORT_RETAIL_PRICE;
                        // _onRefresh();
                        sc_searchGoodsListSc.sortName = AppStrings.SORT_RETAIL_PRICE;
                        sc_searchGoodsListSc.orderType = AppStrings.DESC;
                        sc_searchGoodsListSc.refreshData();
                        Navigator.pop(context);
                      },
                      child: Text(AppStrings.PRICE_DESC, style: FMTextStyle.color_222222_size_13),
                    ))
              ],
            ),
          );
        }).whenComplete(() {
      // _searchGoodsViewModel.setPriceCondition();
      priceConditionArrowUp.value = !priceConditionArrowUp.value;
    });
  }

  // Widget _goodsWidget() {
  //   return GridView.builder(
  //       shrinkWrap: true,
  //       padding: EdgeInsets.all(0),
  //       itemCount: _searchGoodsViewModel.goods.length,
  //       gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, childAspectRatio: 0.9),
  //       itemBuilder: (BuildContext context, int index) {
  //         return GoodsWidget(_searchGoodsViewModel.goods[index], (value) {});
  //       });
  // }

  // _onRefresh() {
  //   _pageIndex = 1;
  //   _searchGoodsViewModel.searchGoods(_keyController.text.toString(), _pageIndex, _pageSize, _sortName, _orderType);
  // }

  // _onLoadMore() async {
  //   _searchGoodsViewModel.searchGoods(_keyController.text.toString(), _pageIndex, _pageSize, _sortName, _orderType);
  // }

  // _sort() {
  //   _focusNode.unfocus();
  //   _pageIndex = 1;
  //   _showDialog(context);
  //   _searchGoodsViewModel
  //       .searchGoods(_keyController.text.toString(), _pageIndex, _pageSize, _sortName, _orderType)
  //       .then((value) => Navigator.pop(context));
  // }
}
